<template>
	<view class="padding-bottom">
		<!-- 发票明细 start -->
		<view class="bg-white border-box  text-lg  solid-top">
			<view class="flex  align-center padding-left-48 padding-right padding-tb justify-between relative">
				<view class=" text-333 text-bold  ">
					{{ i18n["发票类型"] }}
				</view>
				<view class="">
					<text>{{ i18n["电子发票"] }}</text>
				</view>
			</view>

			<view class="flex text-theme text-bold text-333 text-df bg-item  padding-left-48 padding-right padding-tb">
				{{ i18n["发票信息"] }}
			</view>

			<view
				class="flex  align-center solid-bottom padding-left-48 padding-tb padding-right justify-between relative">
				<view class="text-bold text-333">{{ i18n['抬头类型'] }}</view>
				<view class="text-333 text-right text-lg flex align-center justify-end">
					{{invoiceData.invoice_type==1?i18n['个人']:i18n['企业']}}
				</view>
			</view>
			<view
				class="flex  align-center solid-bottom padding-left-48 padding-tb padding-right justify-between relative">
				<view class="text-bold text-333 flex align-center relative active flex-shrink">{{ i18n['发票抬头'] }}</view>
				<view class="text-333 text-right text-lg w75">
					{{invoiceData.invoice_title}}
				</view>
			</view>
			<view
				class="flex  align-center solid-bottom padding-left-48 padding-tb padding-right justify-between relative"
				v-show="invoiceData.invoice_type == 2">
				<view class="relative text-bold text-333 active flex-shrink">{{ i18n['公司税号'] }}</view>
				<view class="text-333 text-right text-lg">
					{{invoiceData.invoice_company_duty_paragraph}}
				</view>
			</view>
		</view>
		<!-- 发票明细 end -->

		<!-- 发票内容 start -->
		<view class="flex bg-white align-center padding-left-48 padding-tb padding-right  justify-between relative ">
			<view class="text-bold text-333">{{ i18n['发票内容'] }}</view>
			<view class=" text-right text-lg">
				<text>{{ i18n['商品明细'] }}</text>
			</view>
		</view>
		<!-- 发票内容 end -->
		<!-- 联系方式 start -->
		<view class="flex bg-white align-center justify-between padding-left-48 padding-tb padding-right  margin-top-20"
			:class="invoiceData.invoice_email?'solid-bottom':''">
			<view class="text-bold text-333 active relative">{{ i18n['联系方式'] }}</view>
			<view class=" text-right text-lg">
				{{invoiceData.invoice_mobile}}
			</view>
		</view>
		<!-- 联系方式 end -->
		<!-- 电子邮箱 start -->
		<view class="flex bg-white align-center justify-between padding-left-48 padding-tb padding-right "
			v-if="invoiceData.invoice_email">
			<view class="text-bold text-333 flex-shrink active relative">{{ i18n['电子邮箱'] }}</view>
			<view class=" text-right text-lg w75">{{invoiceData.invoice_email}}</view>
		</view>
		<!-- 电子邮箱 end -->

		<!-- 确认按钮 start -->
		<view  class="text-center text-white text-lg bg-theme margin-lr margin-top-160 height-88 line-height-88 radius-100"
			@click="submitClick">
			<text>{{ i18n['确认提交'] }}</text>
		</view>
		<!-- 确认按钮 end -->
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/index.js';
	export default {
		data() {
			return {
				invoiceData: {
					invoice_type: 1, //1个人2企业
					invoice_title: '', //抬头
					invoice_company_duty_paragraph: '', //税号
					invoice_mobile: '', //联系方式
					invoice_email: '', //电子邮件
					invoice_is_default: '1' //默认抬头
				},
				type: '',
				showPhone: '', //用来展示的手机号
				order_sn: '', //订单号
				payable_money: '', //发票金额
				isEdit: '',
				invoice_title_person: '', //个人默认抬头
				invoice_title_company: '', //企业默认抬头
				isPerson: true, //进入页面，塞入默认抬头（个人）
				isCompany: true ,//进入页面，塞入默认抬头（企业）
				itemIndex:'',//进入订单索引
			};
		},
		watch: {
			"invoiceData.invoice_mobile": {
				handler(newVal, oldVal) {
					if (validate(newVal, "phone")) {
						// this.invoiceData.invoice_mobile = newVal.substr(0, 3) + "****" + newVal.substr(-4);
						this.invoiceData.invoice_mobile = newVal;
					} else {
						this.invoiceData.invoice_mobile = newVal;
					}
				},
				deep: true,
				immediate: true,
			}
		},
		onLoad(option) {
			this.setNavigationBarTitle(this.i18n['申请开票']);
			let {
				invoice_info,
				itemIndex
			} = option;
			invoice_info = JSON.parse(invoice_info);
			this.invoiceData = invoice_info.invoiceData;
			this.type = invoice_info.type;
			this.itemIndex=itemIndex
			this.order_sn = invoice_info.order_sn;
			this.payable_money = invoice_info.payable_money;
		},
		methods: {
			/**
			 * @description 手机号过滤中间四位用*代替
			 */
			filterMobile() {
				if (!this.invoiceData.invoice_mobile) return '';
				let phone = this.invoiceData.invoice_mobile;
				if (!validate(phone, 'phone')) {
					this.$message.info(this.i18n['请检查手机号']);
				} else {
					// this.showPhone = phone.substr(0, 3) + '****' + phone.substr(-4);
					this.showPhone = phone;
				}
			},
			defalutRise(e) {
				this.invoiceData.invoice_is_default = e.detail.value[0] == 1 ? e.detail.value[0] : 2;
				// console.log(this.invoiceData.invoice_is_default);
			},
			/**
			 * @event
			 * @description 点击提交按钮
			 */

			submitClick() {
				// this.getInvoice(this.invoiceData);
				if (this.type == 1) {
					uni.$emit('select_invoice', this.invoiceData);
					uni.navigateBack({
						delta: 2
					});
				} else {
					this.getInvoice(this.invoiceData);
				}
			},
			/**
			 * @event
			 * @description 选择抬头类型
			 * @param {Number} type - 1：个人或事业单位；2：企业；
			 */
			changeRise(type) {
				this.invoiceData.invoice_type = Number(type);
			},
			/**
			 * @description 发票申请
			 * @param {Object} data 入参
			 */
			getInvoice(data) {
				data.order_sn = this.order_sn;
				data.invoice_price = Number(this.payable_money);

				for (let item in data) {
					if (data[item] == null) {
						delete data[item];
					}
				}
				if (this.isEdit) {
					this.$api
						.post(global.apiUrls.invoiceUpdate, data)
						.then(res => {
							if (res.data.code == 1) {
								this.$message.success(this.i18n['修改成功']);
								setTimeout(() => {
									uni.$emit('onPageUpdata', {
										type: 9,
										index: this.itemIndex,
										order_sn: this.order_sn,
										msg: this.i18n['发票']
									});
									uni.navigateBack({
										delta: 2
									});
								}, 800);
							} else {
								this.$message.info(res.data.msg);
							}
						})
						.catch(err => {
							console.log(err);
						});
				} else {
					this.$api
						.post(global.apiUrls.postInvoiceApply, data)
						.then(res => {
							if (res.data.code == 1) {
								this.$message.success(this.i18n['申请成功']);
								setTimeout(() => {
									uni.$emit('onPageUpdata', {
										type: 9,
										index: this.itemIndex,
										msg: this.i18n['发票']
									});
									uni.navigateBack({
										delta: 2
									});
								}, 800);
							} else {
								this.$message.info(res.data.msg);
							}
						})
						.catch(err => {
							console.log(err);
						});
				}
			},
			/**
			 * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
			 * @param {String} order_sn 订单号
			 */
			getInvoiceData(order_sn) {
				this.$api
					.post(global.apiUrls.pistInvoiceSelect, {
						order_sn: order_sn
					})
					.then(res => {
						if (res.data.code == 1) {} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.active {
		&::before {
			content: '*';
			position: absolute;
			left: -18rpx;
			top: 4rpx;
			color: #fa2033;
		}
	}

	.bg-item {
		background: #FAEDF0;
	}


	.submit-btn {
		background: $theme;
	}
</style>
